<template>
    <div id="all">
        <div id="qq">
            <div id="aa">
                <span class="fa fa-angle-left" @click="back"></span>
            </div>
            <div id="zz">个人中心</div>
            <div><span class="fa fa-comment-o" id="pp"></span></div>
            <div id="ww">···</div>
        </div>
        <div id="ds">
            <div id="top">
                <img :src="tupian[4].img" alt="">
                <router-link to="/user/tou/upload" id="qiqi"><img :src="num" id="bian" alt=""></router-link>
                <div id="shen">
                    <p><span class="fa fa-vimeo-square"></span>普通会员</p>
                    <router-link to="">{{tu.username}}></router-link>
                </div>
                <div id="zuozuo">会员俱乐部></div>
            </div>
            <div id="my-order">
                <div>
                    <span class="fa fa-camera" style="color:orangered"></span>
                    <span class="aqi">我的商品订单</span>
                </div>
                <div>
                    <span class="guge">查看全部订单</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div id="manage">
                <div class="one">
                    <span class="fa fa-shopping-bag"></span>
                    <p>代付款</p>
                </div>
                <div class="one">
                    <span class="fa fa-file-text-o"></span>
                    <p>待提货</p>
                </div>
                <div class="one">
                    <span class="fa fa-rmb"></span>
                    <p>退款中</p>
                </div>
                <div class="one">
                    <span class="fa fa-credit-card"></span>
                    <p>待验证</p>
                </div>
            </div>
            <div class="list">
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-camera" style="color:orangered"></span>
                        <span class="left">我的礼品卡订单</span>
                    </div>
                    <div class="dier"><span class="disan">查看全部订单</span><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa  fa-venus-double" style="color:blue"></span>
                        <span class="left">修改礼品卡下载密码</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-heart-o" style="color:red"></span>
                        <span class="left">修改礼品卡绑定的手机号</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-thumbs-o-up" style="color:orange"></span>
                        <span class="left">会员俱乐部</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-renren" style="color:green"></span>
                        <span class="left">我的优惠卷</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-file-excel-o" style="color:orangered"></span>
                        <span class="left">我的红包</span>
                    </div>
                    <div class="dier"><span class="disan">0张可用</span><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-question-circle-o" style="color:#87CEFF"></span>
                        <span class="left">我的砍价活动</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-user-circle-o" style="color:#9f79ee"></span>
                        <span class="left">我的游戏中奖记录</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-truck" style="color:#cd950c"></span>
                        <span class="left">我的特权码</span>
                    </div>
                    <div class="dier"><span class="disan">0张可用</span><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-home" style="color:#ff3e96"></span>
                        <span class="left">我的收藏</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-home" style="color:#ff3e96"></span>
                        <span class="left">修改密码</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-home" style="color:#ff3e96"></span>
                        <span class="left">在线客服</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-home" style="color:#ff3e96"></span>
                        <span class="left">帮助中心</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
                <div class="duo">
                    <div class="diyi">
                        <span class="fa fa-home" style="color:#ff3e96"></span>
                        <span class="left">航班/车次变更</span>
                    </div>
                    <div class="dier"><span class="fa fa-angle-right"></span></div>
                </div>
            </div>
            <button id="tui" @click="exit">退出登录</button>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data: function () {
            return {
                tu: "",
                islogin: false,
                num: '',
            }
        },
        mounted: function () {

            this.$store.dispatch("requestTupian")
            this.$store.dispatch("requestSelf")
                .then(res => {
                    // console.dir(res.data.userInfo.avatar)
                    
                    // console.log(this.tu)
                    // if (this.tu.avatar == undefined) {
                    //     this.num = "/static/1.png"
                    // }
                });
            this.$store.dispatch("requestIslogin")
                .then(res => {
                    if (res.data) {
                        this.islogin = true;
                        this.tu = res.data.userInfo;
                        console.log(this.tu.avatar)
                        if (this.tu.avatar == undefined) {
                            this.num = "/static/1.png"
                        }else{
                            console.log(123);
                            this.num = '/avatar/' + this.tu.avatar + "?" + Math.random();
                        }
                    } else {
                        this.islogin = false;
                        this.num = "/static/1.png"
                    }
                    // console.log(555,this.num);

                });
        },
        computed: {
            ...mapState([
                "tupian",
            ]),

        },
        methods: {
            back: function () {
                history.back();
            },
            exit: function () {
                this.$store.dispatch("requestExit")
                    .then(res => {
                        this.layer.alert(res.data.msg);
                        location.href = '#/';
                    });
            }
        },
        watch: {
            // tu:function(){
            //     this.$store.dispatch("requestSelf")
            //     .then(res => {

            //         // console.dir(res.data.userInfo.avatar)
            //         this.tu = res.data.userInfo;
            //     });
            // }
        }
    }

</script>

<style scoped>
    #qq {
        position: fixed;
        z-index: 10;
        top: 0;
        display: flex;
        height: 10vh;
        width: 100vw;
        border-bottom: solid 2px #bbb;
        background-color: #eee;
    }

    #ds {
        margin-top: 10vh;
        height: 90vh;
        background-color: #eee;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #aa {
        width: 10vh;
        height: 10vh;
        font-size: 8vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zz {
        width: 50vh;
        text-align: center;
        line-height: 10vh;
    }

    #pp {
        line-height: 10vh;
        font-size: 5vh;
        color: #999;
    }

    #ww {
        width: 10vh;
        height: 10vh;
        font-size: 10vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #top {
        position: relative;
    }

    #top img {
        width: 100vw;
        height: 30vh;
    }

    #qiqi {
        position: absolute;
        width: 23vw;
        height: 23vw;
        /*border: solid 1px black;*/
        border-radius: 50%;
        top: 30px;
        left: 25px;
        overflow: hidden;
    }

    #qiqi img {
        width: 23vw;
        height: 23vw;
    }

    #shen {
        position: absolute;
        top: 50px;
        left: 120px;
        color: white;
        font-size: 14px;
    }

    #shen span {
        color: #C4F4FF;
        margin-right: 10px;
    }

    #shen a {
        color: white;
        font-size: 16px;
    }

    #zuozuo {
        position: absolute;
        width: 140px;
        height: 25px;
        padding-left: 15px;
        line-height: 25px;
        border-radius: 12.5px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 14px;
        top: 50px;
        right: -35px;
    }


    #all {
        background-color: #eee;
    }

    .fa-cog {
        color: white;
        margin-left: 10px;
        margin-top: 8px;
        font-size: 25px;
    }

    .cart {
        color: white;
        margin-left: 245px;
        font-size: 25px;
    }

    #top {
        width: 100%;
        height: 150px;
        /*background-image: url("/static/2.png");*/
    }

    p {
        margin: 0;
    }

    #my-order {
        position: relative;
        top: -3px;
        height: 8vh;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        line-height: 8vh;
        background-color: white;
        border-bottom: solid 1px #ccc;
    }

    .aqi {
        font-size: 14px;
        color: #555;
    }

    .guge {
        font-size: 14px;
        color: #999;
    }



    #manage {
        height: 20vh;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
        background-color: white;
    }

    .one {
        width: 25vw;
        text-align: center;
        color: #eee;
    }

    .one span {
        margin-top: 30px;
        font-size: 30px;
        color: #999;
    }

    .one p {
        font-size: 15px;
        color: #999;
    }

    .list {
        background-color: white;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
    }

    .duo {
        padding-left: 15px;
        padding-right: 10px;
        height: 8vh;
        line-height: 8vh;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 1px #ccc;
    }

    .duo span {
        padding: 0 2px;
    }

    .diyi {
        font-size: 14px;
        color: #666;
    }

    .dier {
        color: #aaa;
        font-size: 20px;
    }

    .disan {
        font-size: 12px;
    }

    #tui {
        width: 94vw;
        height: 12vw;
        margin: 7vw 3vw 5vw 2vw;
        border: none;
        border-radius: 4px;
        background-color: #FE7646;
        font-size: 16px;
        color: white;
    }
</style>